<template>
	<view>
		<view class="top u-text-right w500 u-font-30 u-p-t-30" @click="$navTo('pages/vipDetailImg/vipDetailImg' )">
			<text class="u-m-r-30">权益说明</text>
		</view>
		<view class="card u-p-l-26 u-p-r-36 u-font-30">
			<view class="c-t u-flex u-col-center w700" style="justify-content: space-between;">
				<text>{{user.grade.name}}</text>
				<!-- <text @click="$navTo('pages/updateRecord/updateRecord')">升级记录</text> -->
			</view>
			<view class="c-b u-m-t-36">
				<view class="u-flex u-row-between u-font-24">
					<text class="w700 u-m-b-20 u-font-36 col635F58">Respected-members</text>
					<text class="col8B7D5C"></text>
				</view>
				<view class="u-font-24 w700 col7A7771">
					<text>尊敬的用户</text>
				</view>
			</view>
		</view>
		<template v-if="user.grade.grade_id < 4">
			<view class="u-m-t-40">
				<view class="title u-flex u-m-b-24 u-p-l-20">
					<view class="line"></view>
					<text class="u-font-34 w700 u-m-l-14">升级产品</text>
				</view>
				<view class="products">
					<view class="out-item" v-for="item,idx in gradeList" @click="onSelect(idx,item.goods_id)" :key="idx" >
						<view class="item ">
							<view class="u-flex u-m-b-20">
								<view class="title">
									<text>{{item.name}}</text>
								</view>
								<view class="u-m-l-20 colA40000 w700">¥{{item.upgrade.expend_money}}</view>
							</view>
							<view class="" style="display: flex;justify-content: space-between;">
								<u-parse :html="item.content" style="flex: 1;"></u-parse>
								<view :class="idx == activeCurrent ? 'checkBtn activeCheckBtn' : 'checkBtn' " >
								</view>
							</view>
							
						</view>
					</view>
				</view>
				<view class="u-p-l-20 radio">
					<u-radio-group v-model="radioValue" @change="radioGroupChange">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name">
							{{item.value}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="btn u-flex u-row-center u-col-center" @click="onUpgrade">
				<text>点击升级</text>
			</view>
		</template>
		<template v-else>
			<view class="u-flex u-row-center u-font-30 u-m-30" style="color: #A40000;">恭喜，您已经是最高等级!~</view>
		</template>
	</view>
</template>

<script>
	import {
		grade
	} from '@/api/member'
	import * as UserApi from '@/api/user'
	export default {
		onShow() {
			this.getUser()
			this.getGradeList()
		},
		onLoad(option) {
			if(option.type) {
				this.type = option.type
			}
		},
		data() {
			return {
				istjr: 0,
				type: null,
				user: {},
				gradeList: [],
				radioValue: null,
				activeCurrent: -1,
				activeCurrentId: -1,
				radioList: [{
						name: 1,
						value: '邮寄'
					},
					{
						name: 2,
						value: '自提'
					},
				]
			};
		},
		onLoad() {
			this.toinivte()
		},
		methods: {
			getGradeList() {
				let params = {}
				if(this.type) {
					params.type = this.type
				}
				grade(params).then(res => {
					this.gradeList = res.data.data.list
				})
			},
			getUser() {
				UserApi.info().then(res => {
					this.user = res.data.data.userInfo
				})
			},
			toinivte() {
				let params = {
					is_tjr: 0
				}
				UserApi.inviteuser(params).then(res=> {
					if(res.ret == 200) {
						this.istjr  = res.is_tjr
						console.log(res.is_tjr)
					}
				})
			},
			radioGroupChange(name) {
				this.radioValue = name
			},
			onSelect(idx,id) {
				this.activeCurrent = idx
			},
			onUpgrade() {
				if(this.activeCurrent < 0) {
					this.$toast('请选择升级的等级~')
					return
				}
				if(!this.radioValue) {
					this.$toast('请选择邮寄或者自提~')
					return
				}
				if(this.istjr == 0) {
					uni.navigateTo({
						url: "../join/index?istjr=" + this.istjr
					})
					return
				}
				let props = {
					goodsId: this.gradeList[this.activeCurrent].goods_id,
					goodsNum: 1,
					goodsSkuId: "0",
					mode: "buyNow",
					status: this.radioValue,
					grade_id: this.gradeList[this.activeCurrent].grade_id
				}
				uni.navigateTo({
					url: "../checkout/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		height: 383upx;
		background: #282828;
		color: #FFFFFF;
	}

	.w500 {
		font-weight: 500;
	}

	.w700 {
		font-weight: 700;
	}

	.gold {
		color: #CFBB8B;
	}

	.col635F58 {
		color: #635F58;
	}

	.col7A7771 {
		color: #7A7771;
	}
	.colA40000 {
		color: #A40000;
	}
	.col8B7D5C {	
		color: #8B7D5C;
	}

	.card {
		width: 688upx;
		height: 341upx;
		background: linear-gradient(90deg, #FEF1C6, #F2D9A1);
		box-shadow: 0upx 2upx 5upx 0upx rgba(255, 255, 255, 0.79);
		border-radius: 21upx;
		margin: -220upx auto 0;
		overflow: hidden;

		.c-t {
			height: 132upx;
			box-shadow: 0upx 1upx 2upx 0upx #FBF4E2;
			border-bottom: 1px solid #FBF4E2;
		}
	}

	.line {
		width: 6upx;
		height: 38upx;
		background-color: #FFC243;
	}

	.products {
		.out-item {
			width: 720upx;
			padding-bottom: 8upx;
			margin: 0 auto;
			background: linear-gradient(90deg, #F5DEBB 0%, #DDA265 48%, #DDA265 100%);
			border-radius: 20upx;
			margin-bottom: 30upx;
			border: 2px solid #FFFFFF;
			
		}

		.active {
			border: 2px solid #0a0a0a;
			// box-shadow: 0 0 3px #f2daa3;
		}

		.item {
			width: 710upx;
			background: linear-gradient(0deg, #EDCE98 0%, #E4C389 12%, #F9EDD8 100%);
			border-radius: 20upx;
			padding: 0upx 0 14upx 30upx;
			min-height: 230upx;
			display: flex;
			flex-direction: column;
			.title {
				padding: 8upx 20upx;
				width: max-content;
				background: #A40000;
				border-radius: 0 0 12upx 12upx;
				font-size: 24upx;
				font-weight: bold;
				color: #F4F4F4;
			}
			.checkBtn{
				width: 52rpx;
				height: 52rpx;
				background: linear-gradient(0deg, #C1322B 0%, #D25540 100%);
				border-radius: 50%;
				align-self: flex-end;
				margin-right: 40rpx;
			}
			.activeCheckBtn{
				position: relative;
				&::after{
					content: '';
					width: 30rpx;
					height: 15rpx;
					border-left: 4rpx solid #fff;
					border-bottom: 4rpx solid #fff;
					position: absolute;
					top: 50%;
					left: 50%;
					transform:  translate(-50%,-60%) rotate(-45deg);
					font-size: 36rpx;
					color: #fff;
				}
			}
		}
	}

	.radio {
		padding-bottom: 320upx;
	}

	.btn {
		width: 652upx;
		height: 94upx;
		background: #F2D9A1;
		box-shadow: 0upx 8upx 13upx 0upx rgba(173, 146, 86, 0.27);
		border-radius: 47upx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 5%;
	}
</style>
